<template>
	<view class="sign-box">
		<view class="message-content">
			<uv-notice-bar text="温馨提醒:对方收到消息可能无法及时回复,请直接电话联系TA,咨询车况等"></uv-notice-bar>
			<scroll-view :scroll-y="true" :style="{height:msgContentHeight+'px'}" :scroll-top="scrollTop"
				scroll-with-animation="true">
				<view class="chat-content">

					<view v-for="item in ChatDetail" :key="item.data.time">
						<view v-if="item.send" class="word-right">

							<view class="info">
								<view class="time">
									<text>{{serTime(item.data.time)}}</text>
									<!-- <text class="time">{{serTime(item.data.time)}}</text> -->
								</view>
								<view class="info-content">
									{{item.data.msg}}
								</view>
							</view>
							<uv-avatar :src="imghost+item.data.fromImgsrc"></uv-avatar>

						</view>
						<view v-else class="word-left">
							<uv-avatar :src="imghost+item.data.fromImgsrc"></uv-avatar>

							<view class="info">
								<view class="time">
									<text>{{serTime(item.data.time)}}</text>
								</view>
								<view class="info-content">
									{{item.data.msg}}
								</view>

							</view>

						</view>

					</view>

				</view>
			</scroll-view>
		</view>
		<view class="message-bottom">
			<view class="send-box">
				<view class="send-box_input">
					<uv-input placeholder="聊点什么" v-model="sendInfo.msg"> </uv-input>
				</view>
				<view class="send-box_button">
					<uv-button @click="sendmsg" text="发送" type="success"></uv-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { getChatLog } from '@/utils/storageUtils.js'
	import baseconfig from '@/config.js'
	import { timespantoYMDhms } from '@/common/tools.js'
	export default {
		data() {
			return {
				msgContentHeight: 200,
				scrollTop: 0,
				logList: [],
				chatUser: {
					userid: 0,
					avatar: '',
					username: ''
				},
				sendInfo: {
					msg: '',
					type: 3,
				},
				imghost: baseconfig.api_url
			}
		},
		onReady() {
			let systemInfo = uni.getSystemInfoSync()
			this.msgContentHeight = systemInfo.windowHeight - 120
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				ChatDetail: state => state.socket.ChatDetail
			}),

		},
		onLoad(option) {
			this.chatUser = option
			this.$store.dispatch('socket/createToUser', {
				user_id: this.chatUser.userid,
				username: this.chatUser.username,
				userpic: this.chatUser.imgsrc
			})
			this.reloadChat()
			uni.$on('UserChat', this.reloadChat)
			uni.setNavigationBarTitle({
				title: `与[${ this.chatUser.username}]对话中`
			})

		},
		onUnload() {
			this.$store.commit('socket/closeToUser')
		},
		methods: {
			reloadChat() {
				this.$nextTick(() => {
					this.scrollTop = new Date().getTime();
				});
			},
			serTime(t) {
				return timespantoYMDhms(t)
			},
			sendmsg() {
				this.$store.dispatch('socket/sendChatMessage', this.sendInfo).then(res => {
					this.sendInfo.msg = ''
					this.reloadChat()
				})
			}
		}
	}
</script>

<style lang="scss">
	.message-content{
		
	}
	.message-bottom{
		border-top: #909399 1px solid;
		padding: 10rpx 10rpx 100rpx 5rpx;
		.send-box{
			display: flex;
			flex-direction: row;
			&_input{
				flex: 1;
				padding: 10rpx;
			}
			&_button{
				padding: 10rpx 0rpx;
				width: 130rpx;
			}
		}
	}
	.chat-content {
		padding: 20px;

		.word-left {
			display: flex;
			margin-bottom: 20px;

			img {}

			.info {
				margin-left: 10px;

				.time {
					font-size: 12px;
					color: rgba(51, 51, 51, 0.8);
					margin: 0;
					height: 20px;
					line-height: 20px;
					margin-top: -5px;
				}

				.info-content {
					padding: 10px;
					font-size: 14px;
					background: #fff;
					position: relative;
					margin-top: 8px;
					word-wrap: break-word;
				}

				//小三角形
				.info-content::before {
					position: absolute;
					left: -8px;
					top: 8px;
					content: '';
					border-right: 10px solid #FFF;
					border-top: 8px solid transparent;
					border-bottom: 8px solid transparent;
				}

			}
		}

		.word-right {

			display: flex;
			justify-content: flex-end;
			margin-bottom: 20px;

			.info {
				width: 90%;
				margin-left: 10px;
				text-align: right;

				.time {
					font-size: 12px;
					color: rgba(51, 51, 51, 0.8);
					margin: 0;
					height: 20px;
					line-height: 20px;
					margin-top: -5px;
					margin-right: 10px;
				}

				.info-content {
					max-width: 70%;
					padding: 10px;
					font-size: 14px;
					float: right;
					margin-right: 10px;
					position: relative;
					margin-top: 8px;
					background: #A3C3F6;
					text-align: left;
					word-wrap: break-word;
				}

				//小三角形
				.info-content::after {
					position: absolute;
					right: -8px;
					top: 8px;
					content: '';
					border-left: 10px solid #A3C3F6;
					border-top: 8px solid transparent;
					border-bottom: 8px solid transparent;
				}
			}

		}
	}
</style>